<!--创建时间：2022/4/1 9:00 描述： -->
<template>
  <view class="network-class">
    <view
      class="head-area"
    >
      <button
        class="tool-button"
        @click="onClearLogs"
      >清空</button>
      <uni-easyinput placeholder="过滤url" v-model="filterUrl"/>
    </view>
    <scroll-view class="scroll" :scroll-y="true" :scroll-top="scrollTop" @scroll="scrollEvent">
      <view v-for="(item,index) in networkFilter" :key="index" class="item-class" :class="'console-text-'+item.info.type">
        <view>url: {{item.options.url}}</view>
        <button
          class="tool-button"
          :class="'console-text-'+item.info.type"
          @click="copy(item)"
        >复制请求选项 请求时间: {{item.info.requestTime}}</button>
        <view class="console-content">
          {{item.options}}
        </view>
        <button
          class="tool-button"
          :class="'console-text-'+item.info.type"
          @click="copy(item)"
        >复制 响应头</button>
        <view class="console-content">
          {{item.req.header}}
        </view>
        <button
          class="tool-button"
          :class="'console-text-'+item.info.type"
          @click="copy(item)"
        >复制 请求头</button>
        <view class="console-content">
          {{item.options.header}}
        </view>
        <button
          class="tool-button"
          :class="'console-text-'+item.info.type"
          @click="copy(item)"
        >复制响应数据 返回时间: {{item.info.responseTime}}</button>
        <view class="console-content">
          {{item.req.data}}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {ClipboardUtils, getDate} from "@/webpackPlugin/pageConsole/common";

export default {
  name: "ComponentsNetwork",
  // 定义用到的组件
  components: {},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins:[],
  // 定义变量
  data() {
    return {
      networkList: [],
      scrollTop: 0,
      filterUrl: ''
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    networkFilter(){
      if(this.filterUrl){
        return this.networkList.filter(i=>{
          return i.options.url.indexOf(this.filterUrl) !==-1
        })
      }
      return this.networkList;
    },
    // networkProps2: {
		//		get(){
		//			//return this.name.split('').reverse().join('');
		//			return this.firstName+''+this.lastName;
		//		},
		//		set(value){
		//		}
    // }
  },
  // 监听属性值的变化
  watch:{
    // networkProps(val){
    //   console.log(val)
    // },
    // networkProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
    uni.$on('debugger-refresh-network', () => {
      this.$set(this, 'networkList', getDate().debuggerNetworkLogData)
    });
  },
  // 在页面创建完执行
  created() {
    this.$set(this, 'networkList', getDate().debuggerNetworkLogData)
    this.$set(this, 'scrollTop', getDate().srollTop.network)
  },
  // 定义方法
  methods: {
    onClearLogs() {
      getDate().debuggerNetworkLogData = [];
      this.networkList = [];
    },
    copy(val) {
      ClipboardUtils.setClipboardText(val)
    },
    scrollEvent(event) {
      this.scrollTop = event.detail.scrollTop
      getDate().srollTop.network = this.scrollTop
    }
  },
}
</script>
<style scoped lang="scss">
.network-class{
  @import "../common.scss";
  .item-class{
    border-bottom: 16px yellow solid;
  }
  .console-text-log{
  }
  .console-text-error{
    background-color: red;
  }
  .console-content {
    border-bottom: 1px black solid;
    margin-bottom: 1px;
  }
}
</style>
